import { UploadOutlined } from '@ant-design/icons';
import {
  ProForm,
  ProFormDependency,
  ProFormFieldSet,
  ProFormInstance,
  ProFormItem,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { useModel, useRequest } from '@umijs/max';
import { Button, Input, message } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import { queryCity, queryCurrent, queryProvince } from '../service';
import useStyles from './index.style';
import { util } from '@/@nasty/Util';
import { Http } from '@/@nasty/Axios';
import Upload from '@/@nasty/components/Upload';

const BaseView: React.FC = () => {
  const { styles } = useStyles();
  const formRef = useRef<ProFormInstance>();
  const [data, setData] = useState<any>({});
  const [messageApi, contextHolder] = message.useMessage();
  const { initialState, loading, error, refresh, setInitialState } = useModel('@@initialState');

  const AvatarView = () => {
    return (<Upload
      value={data.Avatar}
      maxCount={1}
      listType={"picture-circle"}
      uploadLabel='更新头像'
      onChange={(v) => {
        if (v) {
          setData({ ...data, Avatar: v });
          SaveUser({ Id: data.Id, Avatar: v });
        }
      }}
    >
    </Upload>)
  };

  function SaveUser(options: any) {
    Http.post("/System/User/SaveUser", { ...options })
      .then((data) => {
        if (data.IsSuccess !== true) { messageApi.error(data.Message); }
        else {
          messageApi.success('更新成功');
          refresh();
        }
      }).catch((e) => {
        messageApi.error(e);
      })
  }


  useEffect(() => {
    load();
    return () => {
    };
  }, []);

  const load = () => {
    Http.post("/System/User/GetCurrentUserInfo", {}).then((res) => {
      if (res.IsSuccess) {
        let data = res.Data;
        data.Password = null;
        setData(data);
        formRef.current?.setFieldsValue(data);
      } else {
        message.error("用户数据加载失败");
      }

    }).catch((error) => {
      message.error(error);
    })
  }

  return (
    <>
      {contextHolder}
      <div className={styles.baseView}>
        <div className={styles.left}>
          <ProForm
            layout="vertical"
            formRef={formRef}
            onFinish={async (value) => {
              await SaveUser({ ...value });
              return true;
            }}
            submitter={{
              searchConfig: {
                submitText: '更新基本信息',
              },
              render: (_, dom) => dom[1],
            }}
          >
            <ProFormText hidden={true} name="Id" />
            <ProFormText width="md" name="Name" label="昵称" rules={[{ required: true, message: '请输入您的名称!' }]} />
            <ProFormText width="md" name="Account" label="账号" disabled />
            <ProFormText width="md" name="Email" label="邮箱" />
            <ProFormText width="md" name="MobileNumber" label="联系电话" />
            <ProFormTextArea width="md" name="Introduction" label="个人简介" />



          </ProForm>
        </div>
        <div className={styles.right}>
          <AvatarView />
        </div>
      </div>
    </>
  );
};
export default BaseView;
